/* ==== Theme tokens (keep aligned with your global palette) ==== */
:root{
    --brand-primary:#f46f5d;
    --brand-primary-light:#ff9b8f;
    --brand-dark:#0a1334;
    --grad-brand:linear-gradient(90deg,#f46f5d,#ff9b8f);
    --grad-brand-dark:linear-gradient(90deg,#0a1334,#f46f5d 60%,#0a1334);
    --brand-ring:rgba(244,111,93,.35);
    --brand-border:rgba(244,111,93,.25);
    --shadow-soft:0 16px 48px rgba(2,6,23,.08);
    --shadow-med:0 22px 64px rgba(2,6,23,.14);
    --shadow-strong:0 30px 80px rgba(2,6,23,.22);
  }
  
  /* ==== Utilities ==== */
  .section{ padding: clamp(28px, 6vw, 64px) 0; }
  .container{ width:min(1160px, 92%); margin-inline:auto; }
  .mt{ margin-top:16px }
  .h2{ font-size:clamp(22px,3.4vw,28px); color:#0a1334; margin:12px 0 8px; }
  .section-title{
    margin:0 0 14px; font-size:clamp(26px,4.4vw,34px);
    background: var(--grad-brand-dark);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .intro{ color:#365486; }
  
  /* ===== Hero ===== */
  .story-hero{
    background: var(--grad-brand);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.35);
  }
  .story-hero .crumbs{ display:flex; gap:8px; align-items:center; color:#ffe8e3; margin-bottom:8px; }
  .story-hero h1{ margin:0 0 6px; font-size:clamp(32px,6vw,54px); }
  .story-hero .lead{ margin:0; max-width:70ch }
  
  /* ===== Why ===== */
  .why__grid{ display:grid; gap:clamp(14px,3vw,24px); grid-template-columns: 1.05fr 1fr; align-items:start; }
  @media (max-width:980px){ .why__grid{ grid-template-columns: 1fr; } }
  .why__media img{ width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow-soft); }
  .list{ margin:0; padding-left:1em; color:#334155; }
  .list li{ margin:6px 0; }
  .list.two-col{ columns:2; column-gap:22px; }
  @media (max-width:700px){ .list.two-col{ columns:1; } }
  
  /* ===== Thanks ===== */
  .thanks .thanks__row{
    display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center;
    border:1px solid var(--brand-border); border-radius:16px; padding:14px; margin-top:14px; background:#fff;
    box-shadow:var(--shadow-soft);
  }
  .thanks__logo{ width:100%; height:auto; object-fit:contain; }
  
  /* ===== MVO ===== */
  .mvo__grid{ display:grid; gap:clamp(12px,2.6vw,18px); grid-template-columns: repeat(3, 1fr); }
  @media (max-width:980px){ .mvo__grid{ grid-template-columns: 1fr; } }
  .mvo__card{
    position:relative; overflow:hidden;
    border-radius:22px;
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.28) 0%, transparent 40%),
      linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary) 45%, var(--brand-primary-600, var(--brand-primary)) 100%);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--brand-primary) 40%, #0000), inset 0 1px 0 rgba(255,255,255,.25);
    color:#fff;
    padding:20px 18px;
    border:none;
    isolation:isolate;
  }
  .mvo__card::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.28) 30%,transparent 60%);
    transform: translateX(-120%); transition: transform .9s ease;
  }
  .mvo__card:hover::after{ transform: translateX(120%); }
  /* Ensure readable text on gradient */
  .mvo__card h3{ color:#fff; margin-top:0; }
  .mvo__card .list{ color:rgba(255,255,255,.95); }
  .mvo__card .list li{ color:rgba(255,255,255,.95); }
  .mvo__card .list strong{ color:#fff; }
  
  /* ===== Overview ===== */
  .overview .list li{ break-inside:avoid; }
  
  /* ===== Spotlight ===== */
  .spotlight__grid{ display:grid; gap:clamp(14px,3vw,24px); grid-template-columns: .95fr 1.05fr; }
  @media (max-width:980px){ .spotlight__grid{ grid-template-columns: 1fr; } }
  .gallery{
    display:grid; gap:12px; grid-template-columns: 1fr; align-content:stretch;
  }
  .gallery img{ width:100%; border-radius:16px; box-shadow:var(--shadow-soft); }
  .spotlight .hero-slider{ height:100%; display:flex; }
  /* Make the embedded hero slider match the right-side text height in spotlight */
  .spotlight .hero-slider .slider{ border-radius:16px; box-shadow:var(--shadow-soft); height:100%; min-height:560px; }
  .spotlight .hero-slider .slider::before{ display:none; padding-top:0; }
  @media (max-width:980px){
    /* On single-column mobile layout, fall back to a reasonable min-height */
    .spotlight .hero-slider .slider{ min-height:460px; }
  }
  
  /* ===== Timeline ===== */
  .tl{ list-style:none; margin:0; padding:0; position:relative; }
  .tl::before{
    content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background: color-mix(in srgb, var(--brand-primary) 45%, #fff);
  }
  .tl > li{ position:relative; display:grid; grid-template-columns: 80px 1fr; gap:12px; padding:0 0 18px; }
  .t__year{
    display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; color:#fff; background:var(--grad-brand);
    margin:0 0 0 0; translate: -2px 0; box-shadow:var(--shadow-soft);
  }
  .t__card{
    border:1px solid var(--brand-border); border-radius:14px; padding:12px; background:#fff; box-shadow:var(--shadow-soft);
  }
  
  /* ===== Impact (counters) ===== */
  .impact{
    background: linear-gradient(90deg,#f46f5d,#ff9b8f);
    color:#fff; padding: clamp(20px,5vw,36px) 0;
  }
  .impact__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; text-align:center; }
  @media (max-width:820px){ .impact__grid{ grid-template-columns: repeat(2,1fr) } }
  .imp{ background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); border-radius:16px; padding:16px; box-shadow:var(--shadow-soft); }
  .imp__num{ display:block; font-size:clamp(28px,5vw,42px); font-weight:900; }
  .imp__label{ opacity:.95; font-weight:700 }
  
  /* ===== CTA ===== */
  .cta__box{
    text-align:center; background:#fff; border:1px solid var(--brand-border); border-radius:18px; padding:20px; box-shadow:var(--shadow-soft);
  }
  .cta__box h2{ margin:0 0 6px; color:#0a1334 }
  .btn-cta.sheen{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; margin-top:10px; }
  .btn-cta.sheen::after{
    content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 0%, rgba(255,255,255,.28) 30%, transparent 60%);
    transform: translateX(-120%); transition: transform .9s ease;
  }
  .btn-cta.sheen:hover::after{ transform: translateX(120%) }
  
  /* ===== Reveal animation ===== */
  .reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible{ opacity:1; transform: translateY(0); }